﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/lib/css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="/lib/css/themes/base/jquery.ui.all.css" />
    <link href="/lib/css/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/plugins/slick.grid.css" type="text/css" />
    <link rel="stylesheet" href="/lib/css/jquery.jdMenu.css" type="text/css" />
    <link href="/plugins/jquery.treeview.css" rel="stylesheet" type="text/css" />
    <link href="/plugins/CheckList/ui.dropdownchecklist.themeroller.css" rel="stylesheet" />
    <style type="text/css">
        /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
        .ui-layout-center, /* has content-div */ .ui-layout-west, /* has Accordion */ .ui-layout-east, /* has content-div ... */ .ui-layout-east .ui-layout-content
        {
            /* content-div has Accordion */
            padding: 0;
            overflow: hidden;
        }
        .ui-layout-center P.ui-layout-content
        {
            line-height: 1.4em;
            margin: 0; /* remove top/bottom margins from <P> used as content-div */
        }
        h3, h4
        {
            /* Headers & Footer in Center & East panes */
            font-size: 1.1em;
            background: #EEF;
            border: 1px solid #BBB;
            border-width: 0 0 1px;
            padding: 7px 10px;
            margin: 0;
        }
        .ui-layout-east h4
        {
            /* Footer in East-pane */
            font-size: 0.9em;
            font-weight: normal;
            border-width: 1px 0 0;
        }
        .menuContainerJSListBox
        {
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 50px;
            overflow: auto;
        }
    </style>
    <!-- REQUIRED scripts for layout widget -->
    <script src="/lib/js/jquery-latest.js" type="text/javascript"></script>
    <script src="/lib/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/lib/js/jquery.layout-latest.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.layout.resizePaneAccordions-1.0.js"></script>
    <script src="/plugins/globalize.js" type="text/javascript"></script>
    <script type="text/javascript" src="/lib/js/themeswitchertool.js"></script>
    <script type="text/javascript" src="/lib/js/debug.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.positionBy.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.jdMenu.js"></script>
    <script src="/lib/js/jquery.event.drag-2.0.min.js"></script>
    <script src="/plugins/slick.editors.js"></script>
    <script src="/plugins/slick.core.js"></script>
    <script src="/plugins/slick.checkboxselectcolumn.js"></script>
    <script src="/plugins/slick.autotooltips.js"></script>
    <script src="/plugins/slick.cellrangedecorator.js"></script>
    <script src="/plugins/slick.cellrangeselector.js"></script>
    <script src="/plugins/slick.cellcopymanager.js"></script>
    <script src="/plugins/slick.cellselectionmodel.js"></script>
    <script src="/plugins/slick.rowselectionmodel.js"></script>
    <script src="/plugins/slick.formatters.js"></script>
    <script src="/plugins/slick.grid.js"></script>
    <script src="/Scripts/Helper.js" type="text/javascript"></script>
    <script src="/plugins/surge.core.js" type="text/javascript"></script>
    <script src="/plugins/surge.slickGrid.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-inherit.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-listbox.js" type="text/javascript"></script>
    <script src="/plugins/CheckList/ui.dropdownchecklist.js" type="text/javascript"></script>
    <script src="/plugins/jquery.treeview.js" type="text/javascript"></script>
    <script src="/plugins/jquery.treeview.edit.js" type="text/javascript"></script>
    <script src="/plugins/jquery.contextMenu.js" type="text/javascript"></script>
    <script src="/plugins/jquery.ui.position.js" type="text/javascript"></script>
    <script src="/Scripts/AjaxLoading.js" type="text/javascript"></script>
    <script src="/Scripts/CurrentTime.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = DisplayTime;
        var myLayout;
        var helper = new Helper();
        $(document).ready(function () {

            var rolename = $.cookie("userrole");
            if (rolename == null || rolename != 'Admin') {
                 window.location = '/Page/login.aspx';
            }

            myLayout = $('body').layout({
                west__size: 234
                , east__size: 300
                // RESIZE Accordion widget when panes resize
                , west__onresize: $.layout.callbacks.resizePaneAccordions
                , east__onresize: $.layout.callbacks.resizePaneAccordions
                , west__initClosed:true
            });
            initStep2();
            $('ul.dropdown').jdMenu();
            // ACCORDION - in the West pane
            $("#accordion1").accordion({ fillSpace: true });

            // ACCORDION - in the East pane - in a 'content-div'
            $("#accordion2").accordion({
                fillSpace: true
                , active: 1
            });


            // THEME SWITCHER
            addThemeSwitcher('.ui-layout-north', { top: '12px', right: '5px' });
            // if a new theme is applied, it could change the height of some content,
            // so call resizeAll to 'correct' any header/footer heights affected
            // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
            setTimeout(myLayout.resizeAll, 1000); /* allow time for browser to re-render with new theme */

            showLayout('1');
        });

        function initStep2(parameters) {
            mysupLayout = $('#mainFrame').layout({
                center__paneSelector:	".inner-center" 
                , west__paneSelector:		".inner-west"
                ,west__size: '40%' 
                ,south__size:'30%'
            });
        }
        function showLayout(step, docid) {
            switch (step) {
            case '1':
                SaleCoMappingSaleInit();
                    
                break;

            case '2':
                    
                break;
            }
        }

        function SaleCoMappingSaleInit(parameters) {
            $("#Options").dropdownchecklist();
            SaleCoInit();
            SaleInit();
            MappingDataInit();
           
            //Init button
            $("#btnProdSave")
                .button({
                 
                    icons: {
                        primary: "ui-icon-save"
                    },
                })
                .click(function () {
		
                    var saleco = {username: saleCoID, display: saleCoName };
			        var sales = getSaleSelect();
                    getTreeviewApprovalMappingData(saleco,sales);
			        renderTreeViewApprovalMapping();
                });
           
            $("#btnProdFinish")
                .button({
                 
                    icons: {
                        primary: "ui-icon-save"
                    },
                })
                .click(function () {
			    
                    var mapping = getSaleCoMappingData();
			        helper.UpdateSaleMapping(mapping, function(data) {
			            $('#browser').html('');
			            MappingDataInit();
			            MsgBox('Update ' + data + ' Sale Success');
			        });
			    
                });
            
            $("#ButtonSearch").button({
                 
                icons: {
                    primary: "ui-icon-search"
                }
            })
                .click(function () {
                    searchSale();
                    //SaleCoInit();
                });
           
        }
        
        function searchSale (key) {
            if (key == 13) {
                event.cancelBubble = true;
                return false;
            }
            var searchText = $("#TextSaleCoSearch").val();
			        var filterSales = jQuery.grep(salesCo, function(element, index){
                        return element.UserName.toLowerCase().indexOf(searchText.toLowerCase()) != -1 || element.FirstName.toLowerCase().indexOf(searchText.toLowerCase()) != -1 || element.Lastname.toLowerCase().indexOf(searchText.toLowerCase()) != -1 || element.msalegrp.toLowerCase().indexOf(searchText.toLowerCase()) != -1; 
                    });
           var salescoListFilter = [];
            $.each(filterSales, function(key, value) {
                salescoListFilter.push(new SaleCoListBoxItem(value["FirstName"]+ " " + value["Lastname"], value["UserName"]));
            });
            window.listBoxAllItems.clear();
            window.listBoxAllItems.addItems(salescoListFilter);
           
       }

        function getSaleCoMappingData() {
            var approvalMappingList = [];
            $('#browser span[role="sale"]').each(function(i) {
                
                var saleCoUserName = ($(this).attr('saleCoUsername'));
                var saleUserName = ($(this).attr('saleUsername'));

                approvalMappingList.push({ SaleUsername: saleUserName, SaleCoUserName: saleCoUserName });
                
            });
            return approvalMappingList;
        }
        
        var saleCoID;
        var saleCoName;
        var SaleCoListBoxItem = JSListBox.Item.extend({

            text: "",
            kvalue: "",
            init: function(text,value) {
                this.text = text;
                this.kvalue = value;
            },

            render: function() {
                return '<a value='+ this.kvalue + ' href="#">' + this.text + '</a>';
            },
			
            onClick: function() {
                saleCoID= this.kvalue;
                saleCoName = this.text;
                //alert(item.value);
            },
			
            onDblClick: function() {
                var item = new JSListBox.Item();
                item.kvalue = this.text + " item double clicked.";
                item.enabled = false;
                //alert(item.value);
            }
			
        });
        var salesCo = [];
        var salesCoList = [];
        function SaleCoInit() {
            salesCo = [];
            salesCoList = [];
            helper.GetAllSaleCo(function(data) {
                salesCo = data.AllSaleCo;
                window.listBoxAllItems = new JSListBox({ 'containerSelector': 'ListBoxSaleCoItems' });
                $.each(salesCo, function(key, value) {
                    salesCoList.push(new SaleCoListBoxItem(value["FirstName"]+ " " + value["Lastname"], value["UserName"]));
                });
                window.listBoxAllItems.addItems(salesCoList);
            });
        }
        
        function getSaleSelect() {
           var sales = [];
               $('#saleChecklist li input:checked').each(function(value) {
                   sales.push({ saleName: $(this).next().text(), SaleUserName: $(this).val()});
               });
               return sales;
          
       
       }
        function SaleInit() {
            var sales = [];
            var htmlcomp = '';
            var htmltemplate = '<li class="ui-menu-item" ><div class="ui-dropdownchecklist-item ui-state-default ui-corner-all" style="padding: 0.2em 0.4em;"><input type="checkbox" tabindex="0" class="active" id="ddcl-Options-i0" index="0"value="{0}"><label for="ddcl-Options-i0" class="ui-dropdownchecklist-text"style="cursor: default; font-size:12px; padding: 0.2em 0.4em;">{1}</label></div></li>';
            helper.GetAllSale(function(data) {
                sales = data.AllSale;
                $.each(sales, function(key, value) {
                    htmlcomp += htmltemplate.format(value.UserName, value.FirstName +' ' + value.Lastname);
                });

                $('#saleChecklist ul').html(htmlcomp);

            });
        }
        
        
        function MappingDataInit() {
            helper.GetAllSaleCoMapping(function(data) {
                var mappingDataCo = data.AllSaleCoSale;
                var groupApproverData =  helper.groupBy(mappingDataCo, function (obj) {
                        return obj.SaleCoUserName;
                    });
                $.each(groupApproverData, function (key,value )
                {
                    var sales = jQuery.grep(mappingDataCo, function(n) {
                    return (n.SaleCoUserName === key);
                    });
                    if (sales.length > 0) {
                        var saleco = { username: sales[0].SaleCoUserName, display: sales[0].saleCoName };
                        getTreeviewApprovalMappingData(saleco, sales);
                    }
                });
                renderTreeViewApprovalMapping();
                
                
            });
        }
        function getTreeviewApprovalMappingData(approver, sales) {
            var treeviewHtml = $('#browser').html();
            var htmlSaleLevel = '<li><span class="file sale" role="sale" saleCoUsername="{2}"  saleUsername="{1}">{0}</span></li>';
            var htmlSaleComplete = '';
            var htmlApproverLevel = '<li><span class="folder" role="approver" >{0}</span><ul>';

            $.each(sales, function(key, value) {
                htmlSaleComplete = htmlSaleComplete + htmlSaleLevel.format(value.saleName,value.SaleUserName, approver.username);
            });
            var complete = htmlApproverLevel.format(approver.display) + htmlSaleComplete + '</ul></li>';
            $('#browser').html(treeviewHtml + complete);
            
        }
        function renderTreeViewApprovalMapping() {
            $('#browser').treeview();
            //$("#browser").contextMenu();
            $("#browser").bind("contextmenu", function(event) {
                
				if ($(event.target).is("li") || $(event.target).parents("li").length) {
				    if (confirm('Do you want to remove this user?'))
				    { 

                    kk = $(event.target);
					$("#browser").treeview({
						remove: $(event.target).parents("li").filter(":first")
					});
				        }
					return false;
				}
			});
        }
    </script>
</head>
<body>
    <div class="ui-layout-north ui-widget-content" style="display: none;">
        <div id="main_header">
            <div class="logo" style="float: left; margin-top: 10px;">
                <img src="/images/logoNawa.png" alt="Nawaplastic Co.,Ltd." />
            </div>
            <div style="float: left; margin-top: 10px; margin-left: 100px;">
                <span style="font-family: verdana; font-size: 16px; font-weight: bold;" class="ui-state-highlight"
                    id="curTime"></span>
            </div>
            <div style="float: right; margin-right: 160px;">
                <div>
                    <div style="width: 70px;float:left">User as: </div><span class="userInfo" id="userNameShow">
                        UserName</span><br />
                    <div style="width: 70px; float:left">Logged in as:</div> <span class="userInfo" id="SpanUserIP">
                        IP</span>
                    <br />
                    <div style="width: 70px; float:left">Role as :</div> <span class="userInfo" id="SpanRoleShow">
                        Role</span>
                </div>
            </div>
        </div>
        <div id="toolbarHolder">
            <div class="ui-state-default ui-corner-all ui-helper-clearfix">
                <ul id="main-menu" class="jd_menu dropdown ui-widget-header" onmouseover="myLayout.allowOverflow('north')"
                    onmouseout="myLayout.resetOverflow(this)">
                    <li><a href="#">Application &raquo;</a>
                        <ul class="ui-state-default">
                            <li><a href="/Page/AdminDocumentPage.htm">Admin Document Management</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Admin Tools&raquo;</a>
                        <ul class="ui-state-default">
                           <li><a href="/Page/adminMain.htm">UserRole Management</a></li>
                            <li><a href="/Page/ndpriceManament.htm">ND Price Management</a></li>
                            <li><a href="/Page/SaleApprovalMapping.htm">Sale and Approver Mapping</a></li>
                            <li><a href="/Page/SaleCoordinatorMapping.htm">Sale and SaleCo Mapping</a></li>
                            <li><a href="/Page/ProductGrpManament.htm">Product Cate Manament</a></li>
                            <li><a target="blank" href="/Page/ReportViewer.aspx">Report</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="MessageBar" class="ui-layout-south ui-widget-content ui-state-error" style="display: none;">
        Message Bar
    </div>
    <div id="mainFrame" class="ui-layout-center" width="100%" height="600" frameborder="0"
        scrolling="auto">
        <div class="inner-center">
            <div style="height: 20px;">
            </div>
            <div id="saleChecklist" class="ui-widget ui-widget-content ui-corner-all" style="width: 50%;
                height: 80%; margin-left: 50px; margin-bottom: 10px; overflow: auto;">
                <div class="ui-widget-header" style="width: 99%;">
                    Sale:
                </div>
                <ul>
                </ul>
            </div>
            <div style="margin-left: 50px;">
                <button id="btnProdSave">
                    ADD</button>
               
            </div>
        </div>
        <div class="inner-west">
            <div class="DCTextClass ">
                Sale Coordinator :
                <input id="TextSaleCoSearch" type="text" class="ui-widget ui-widget-content ui-corner-all ui-menu-item" />
                <button id="ButtonSearch">
                    Search</button>
            </div>
            <div id="ListBoxSaleCoItems" style="height: 80%;">
            </div>
        </div>
        <div class="ui-layout-south">
            <div id="DocumentListSaleCoStep">
                <div style="padding-top: 10px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px;">
                    <span style="float: left">SaleCo Mapping List</span>
                </div>
                <div id="treeviewSaleCoMapping" style="text-align: center; float: left; overflow-y: scroll; height: 250px; width:300px;">
                    <ul id="browser" class="filetree treeview-famfamfam">
                    </ul>
                </div>
                <div style="float: left; padding-left:10px">
                    <button id="btnProdFinish">
                        Finish</button>
                </div>
            </div>
        </div>
    </div>
    <div id="DocumentListApprovalStep" style="display: none">
        <div style="padding-top: 10px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px;">
            <span style="float: right">Quick Search&nbsp;<input type="text" maxlength="50"></span>
        </div>
        <div id="gridDocumentListApprovalStep">
        </div>
    </div>
    <div class="ui-layout-west" style="display: none;">
        <h3 class="ui-widget-header">
            Navigation</h3>
        <div class="ui-layout-content">
            <div id="accordion1" class="basic">
                <h3>
                    <a href="#">Section 1</a></h3>
                <div>
                    
                </div>
                
            </div>
        </div>
    </div>
</body>
</html>
